<template>
	<el-container>
		<el-header style="height: auto;" >
			<el-card style="width: 100%; height: auto;" shadow="hover">
				<Search/>
			</el-card>
		</el-header>
		<el-header>
			<div class="left-panel">
			</div>
			<div class="right-panel">
				<el-button  type="primary" plain icon="el-icon-share" circle />
				<el-button  type="primary" plain icon="sc-icon-file-excel" circle ></el-button>
				<el-button  type="primary" plain icon="el-icon-Delete" circle />
			</div>
		</el-header>

		<el-main class="nopadding">
			<sc-form ref="formRef"
					 v-model="form"
					 :config="config"
					 :loading="loading"
			>
			</sc-form>
		</el-main>
	</el-container>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import Search from "../table2/search2.vue";
import options from "@/views/test/table2/json/filter";
const formRef = ref<any>(null);

const config = ref({
	labelWidth: '1px',
	labelPosition: 'right',
	size: 'default',
	emptySize: 0,
	emptySpan: 18,
	span: 8,
	mode: 'chart',
	formItems: [
		{
			label: '',
			name: 'chats',
			value: '',
			span:24,
			component: 'chart',
			option: {
				title: {
					text: 'Line Demo',
					subtext: '基础折线图（可切换数据）'
				},
				grid: {
					top: '80px'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['销量A', '销量B']  // 添加图例
				},
				toolbox: {
					feature: {
						saveAsImage: {},  // 保存图片
						magicType: {      // 切换图表类型（如折线/柱状）
							type: ['line', 'bar'],
							title: { line: '折线图', bar: '柱状图' }
						},
						myToggleData: {   // 自定义按钮：切换数据
							show: true,
							title: '切换数据',
							icon: 'path://M512 64C264.6...', // 省略SVG路径
							onclick: function () {
								// 模拟点击切换（实际项目通过事件触发）
								console.log('切换数据');
							}
						}
					}
				},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						name: '销量A',
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'line'
					},
					{
						name: '销量B',
						data: [110, 180, 120, 120, 60, 90, 110],
						type: 'line'
					}
				]
			}

,
		},
		{
			label: '',
			name: 'chats',
			value: '',
			component: 'chart',
			option: {
				title: {
					text: 'Line Demo',
					subtext: '基础折线图'
				},
				grid: {
					top: '80px'
				},
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'line'
					},
					{
						data: [110, 180, 120, 120, 60, 90, 110],
						type: 'line'
					}
				]
			},
		},
		{
			label: '',
			name: 'chats',
			value: '',
			component: 'chart',
			option: {
				title: {
					text: 'Pie Demo',
					subtext: '基础饼图'
				},
				tooltip: {
					trigger: 'item'
				},
				series: [
					{
						name: '访问来源',
						type: 'pie',
						radius: ['40%', '70%'],
						center: ['50%', '60%'],
						label: false,
						data: [
							{ value: 1048, name: '搜索引擎' },
							{ value: 735, name: '直接访问' },
							{ value: 580, name: '邮件营销' },
							{ value: 484, name: '联盟广告' },
							{ value: 300, name: '视频广告' }
						]
					}
				]
			},
		},
		{
			label: '',
			name: 'chart',
			value: '',
			component: 'chart',
			option: {
				title: {
					text: 'Radar Demo',
					subtext: '基础雷达(属性)图'
				},
				tooltip: {
					trigger: 'item'
				},
				radar: {
					radius: 100,
					center: ['50%', '55%'],
					indicator: [
						{ name: '销售', max: 100 },
						{ name: '管理', max: 100 },
						{ name: '信息技术', max: 100 },
						{ name: '客服', max: 100 },
						{ name: '研发', max: 100 },
						{ name: '市场', max: 100 }
					]
				},
				series: [
					{
						name: 'SCUI',
						type: 'radar',
						areaStyle: {},
						data: [
							{
								value: [74, 90, 95, 65, 80, 31]
							}
						]
					}
				]
			},
		}
		,
		{
			label: '',
			name: 'chart',
			value: '',
			component: 'chart',
			option: {
				title: {
					text: 'Kline Demo',
					subtext: '基础K线图'
				},
				grid: {
					top: '80px'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross'
					}
				},
				xAxis: {
					data: [
						'2017-10-23',
						'2017-10-24',
						'2017-10-25',
						'2017-10-26',
						'2017-10-27',
						'2017-10-28',
						'2017-10-29',
						'2017-10-30'
					]
				},
				yAxis: {
					scale: true
				},
				series: [
					{
						type: 'k',
						data: [
							[2213.19, 2199.31, 2191.85, 2224.63],
							[2203.89, 2177.91, 2173.86, 2210.58],
							[2170.78, 2174.12, 2161.14, 2179.65],
							[2179.05, 2205.5, 2179.05, 2222.81],
							[2212.5, 2231.17, 2212.5, 2236.07],
							[2227.86, 2235.57, 2219.44, 2240.26],
							[2242.39, 2246.3, 2235.42, 2255.21],
							[2246.96, 2232.97, 2221.38, 2247.86]
						]
					}
				]
			}
			}
		,
		{
			label: '',
			name: 'chart',
			value: '',
			component: 'chart',
			option: {
				title: {
					text: 'Gauge Demo',
					subtext: '基础仪表盘'
				},
				series: [
					{
						center: ['50%', '60%'],
						type: 'gauge',
						anchor: {
							show: true,
							showAbove: true,
							size: 20,
							itemStyle: {
								borderWidth: 5
							}
						},
						progress: {
							show: true
						},
						data: [
							{
								value: 70
							}
						]
					}
				]
			},
		}
		,
		{
			label: '',
			name: 'chart',
			value: '',
			component: 'chart',
			option: {
				title: {
					text: 'Radar Demo',
					subtext: '基础雷达(属性)图'
				},
				tooltip: {
					trigger: 'item'
				},
				radar: {
					radius: 100,
					center: ['50%', '55%'],
					indicator: [
						{ name: '销售', max: 100 },
						{ name: '管理', max: 100 },
						{ name: '信息技术', max: 100 },
						{ name: '客服', max: 100 },
						{ name: '研发', max: 100 },
						{ name: '市场', max: 100 }
					]
				},
				series: [
					{
						name: 'SCUI',
						type: 'radar',
						areaStyle: {},
						data: [
							{
								value: [74, 90, 95, 65, 80, 31]
							}
						]
					}
				]
			},
		}
	]
})
const form = {

}
//const formOptions = reactive<FormItemRows[]>(formItems);
const emit = defineEmits(['onSearch']);

const onSearch = () => {
	console.log("on")
	emit('onSearch', {id:1});
};


</script>
<style lang="scss" scoped>

</style>
